<script setup>
import {reactive, ref} from "vue";

  let age=ref(18);
  function  add(){
      age.value++;
      console.log(age.value)
  }
  let arr=reactive([1,2,3,4]);
  function pushArr(){
      arr.push(5);
  }
  let obj=reactive({
      age:18,
      tall:180,
      obj1:{
          age1:91
      }
  })
function  changeObj(){
      obj.age++;
      obj.tall++;
      obj.obj1.age1++;
    console.log( obj.age, obj.tall, obj.obj1.age1)
}
let obj2=reactive(obj);
console.log(obj2===obj);
let text=ref('我是跑马灯123456789');
let isDisabled=ref(false);
let timer=null;
function letText(){
    timer=setInterval(()=>{

       text.value=text.value.substring(1)+text.value[0];
    },100)
    isDisabled.value=!isDisabled.value;
}
function  stop(){
    isDisabled.value=!isDisabled.value;
    clearInterval(timer)
}
</script>

<template>
<div>{{age}}</div>
    <button @click="add">add</button>
  <button @click="pushArr">push</button>
  <button @click="changeObj">change</button>
  <button @click="letText" :disabled="isDisabled">启动</button>
  <button @click="stop" :disabled="!isDisabled">停止</button>
    <p>{{text}}</p>
  <div v-for="item in arr" :key="item">{{item}}</div>
</template>

<style scoped>

</style>